<template> 
	<view class="checkbox">
		<template v-if="type === 'label'">
			<view
				v-for="(item, index) in list"
				:key="index"
				class="checkbox-item"
				:class="[
				  {active :item.valueCode === '1'},
				  'checkbox-' + size]" 
				@click="onItemClick(item,index)"
			>{{item.typeName}}</view>
		</template>
		
		<template v-if="type === 'icon'">
			<image
				v-for="(item, index) in list"
				:key="index"
				class="checkbox-icon-item"
				:src="item.status ? $imgUrl(item.activeIcon) : $imgUrl(item.icon)"
				@click="onItemClick(index)" 
			/>
		</template>
	</view>
</template>

<script>
	export default { 
		props: {
			list: { type: Array, default: ()=>{} },
			type: { type: String, default: 'label' },
			size: { type: String,default:'middle'},
			lableName:{type:String,default:'label'}
		},
		methods: {
			onItemClick(item,index) {								
				// console.log('点击到了',item.status)
				// this.list[index].status = !this.list[index].status
				this.$emit('select', index);
			}
		}
	}
</script>

<style scoped lang="scss">
	.checkbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.checkbox-item {
		display: flex;
		align-items: center;
		justify-content: center;		
		border: 1rpx solid #636363;
		border-radius: 6rpx;
		font-size: 28rpx;
		color: #333;
	}
	.checkbox-middle{
		width: 160rpx;
		height: 56rpx;
		margin: 20rpx 0 0 20rpx;
	}
	.checkbox-small{
		width: 120rpx;
		height: 56rpx;
		margin: 20rpx 0 0 20rpx;
	}
	.checkbox-item.active {
		color: #4F75BE;
		background: #F4F8FC;
		border-color: #4F75BE;
	}
	.checkbox-icon-item{
		width: 80rpx;
		height: 80rpx;
		margin: 20rpx 20rpx 0;
	}
</style>
